<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="../../../bower_components/vue/dist/vue.min.js"></script>
    <link rel="stylesheet" href="../../../bower_components/animate.css/animate.min.css"/>
</head>

<body>
    <div id="box">
        <div :style="style_one" @click="mousedownFunc(event)">{{box_one}}</div>
        <div :style="style_two">{{box_two}}</div>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#box',
            data: {
                msg: 'Hello World!',
                box_one: '盒子一',
                box_two: '盒子二',
                style_one: { background: 'red', width: '100px', height: '100px', position: 'absolute', top: '0px', right: '0px' },
                style_two: { background: 'blue', width: '100px', height: '100px', position: 'absolute', top: '0px', left: '0px' },
            },
            methods:{
                mousedownFunc(){
                    alert(111);
                }
            }
        });
    </script>
</body>

</html>